import Uploads from '@/components/Uploads';

import { editUserInfo } from "@/services/user/user";
import { useModel } from "@umijs/max";
import { useRequest } from "ahooks";
import { Button, Col, Drawer, Form, Input, Row, Space, message } from "antd"
import { useEffect } from "react";


export default ({onClose,open}) =>{
    const [form] = Form.useForm();
    const {userInfo,changeUserInfo} = useModel('global')
    useEffect(()=>{
      form.setFieldsValue({
        ...userInfo,
        avatar:(userInfo.avatar? [userInfo.avatar] : [])
      })
    },[open])
    const {run} = useRequest(editUserInfo,{
      manual:true,
      onSuccess:(res,[params])=>{
        changeUserInfo({
         ...userInfo,
         nickname:params?.nickname,
         avatar:params?.avatar,
        })
        message.success('修改成功')
        onClose()
      }
    })
    return<Drawer
    title="修改个人信息"
    width={560}
    onClose={onClose}
    open={open}
    styles={{
      body: {
        paddingBottom: 80,
      },
    }}
    extra={
      <Space>
        <Button onClick={onClose}>取消</Button>
        <Button onClick={async()=>{
         const formVal = await form.validateFields();
         run({
          ...formVal,
          id:userInfo.id,
          avatar:formVal.avatar[0],
         })
        }} type="primary">
          提交
        </Button>
      </Space>
    }
  >
     <Form form={form} >
      <Row gutter={16}>
        <Col span={24}>
          <Form.Item
            name="avatar"
            label="头像"
          >
           <Uploads length={1} />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <Form.Item
            name="nickname"
            label="昵称"
            rules={[
              {
                required: true,
                message: '请输入昵称',
              },
            ]}
          >
            <Input showCount maxLength={20} placeholder="" />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <Form.Item
            name="password"
            label="密码"
          >
            <Input showCount maxLength={20} placeholder="" />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  </Drawer>
}